<template>
	<view class="content">
<!-- 		<view class="">
			
			{{this.name}}
			
		</view> -->
		<!-- 提示信息区域 -->
		<view class="unionsettlement-title">
			<view class="title">
				<image src="../../static/images/ruhuizhuanhui.png" mode="" class="img"></image>
				<view class="text" style="width: 80%;">
					{{ showtitle ? '您的入驻信息已成功提交，请耐心等待审批结果。' : `您的申请正由${name}审批中，预计5个工作日内完成，请耐心等待...` }}
				</view>
			</view>
		</view>
		
		<!-- 流程导览区域 -->
		<view class="process background-f borderradius steps">
			<view class="flex" style="margin-bottom: 15rpx;">
				<text class="flex1" style="font-weight: 700;">流程导览</text>
				<image src="../../static/images/liucheng.png" mode="" class="icon-img basic-img"></image>
			</view>
			<view class="linestyle">
				<image src="../../static/images/line.png" mode="" class="line1"></image>
				<image src="../../static/images/line1.png" mode="" class="line2"></image>
			</view>
			<!-- 遍历步骤 -->
			<view v-for="(step, index) in steps" :key="index" class="step" :class="step.className">
				<text class="circle"></text>
				<view class="step-title">{{ step.title }}</view>
				<view class="status" v-if="step.isActive" style="color: rgba(189, 26, 45, 1);">当前位置</view>
				<uni-icons style=" color:  #c8c8c8;" :type="step.isCompleted ? 'checkbox' : 'checkbox-outline'" size="24" :class="{ actived: step.isCompleted }"></uni-icons>
				<view class="line" v-if="index < steps.length - 1"></view>
			</view>
		</view>
	</view>
</template>
<script>
	export default {
		onLoad(option) {
			// 根据传递的参数设置标题显示状态
			this.showtitle = option.showtitle === 'true'; // 转为布尔值
			this.status= Number(option.status) 
			this.name= option.name
			this.updateSteps(); // 初始化步骤
		},
		data() {
			return {
				showtitle: true, // 控制显示的标题
				steps: [], // 初始化空的步骤
				status:0,
				name:'',
			}
		},
		methods: {
			// 更新步骤状态
			updateSteps() {
				// 定义步骤数据
				this.steps = this.showtitle
					? [ 
						{ title: '开始', isActive: false, isCompleted: false, className: '' },
						{ title: '上级工会审批', isActive: false, isCompleted: false, className: '' },
						{ title: '结束', isActive: false, isCompleted: false, className: '' }
					  ]
					: [
						{ title: '开始', isActive: false, isCompleted: false, className: '' },
						{ title: '组织员审批', isActive: false, isCompleted: false, className: '' },
						{ title: '工会负责人审批', isActive: false, isCompleted: false, className: '' },
						{ title: '结束', isActive: false, isCompleted: false, className: '' }
					  ];

				let currentStepIndex = this.status;

				this.steps.forEach((step, index) => {
					step.isCompleted = index < currentStepIndex;
					step.isActive = index === currentStepIndex;
					step.className = step.isActive ? 'active' : step.isCompleted ? 'completed' : 'unfinished';
				});
			}
		},
		watch: {
			// 当显示状态变化时重新更新步骤
			showtitle() {
				this.updateSteps();
			}
		}
	}
</script>


<style lang="scss" scoped>
	.background-f {
		margin: 32rpx !important;
		border-radius: 20rpx !important;
		overflow: hidden;
	}

	.unionsettlement-title {
		.title {
			position: relative;
			width: 92%;
			height: 238rpx;
			margin: 0 auto;
			margin-top: 120rpx;
			border-radius: 10px;
			background: rgba(189, 26, 45, 1);
			display: flex;
			justify-content: center;
			align-items: center;

			.img {
				width: 172rpx;
				height: 172rpx;
				position: absolute;
				top: -43px;
				left: 50%;
				transform: translate(-50%);
			}

			.text {
				transform: translateY(20rpx);
				color: rgba(255, 255, 255, 1);
			}
		}
	}

	.linestyle {
		position: relative;
		padding: 16rpx 0;

		.line1 {
			width: 100%;
			height: 12rpx;
			position: absolute;
		}

		.line2 {
			width: 100%;
			height: 12rpx;
			position: absolute;
			left: 3%;
		}
	}

	.steps {
		display: flex;
		margin: 32rpx;
		flex-direction: column;
		padding: 32rpx;

		.step {
			display: flex;
			align-items: center;
			position: relative;

			.circle {
				width: 20rpx;
				height: 20rpx;
				border-radius: 20rpx;
				background: rgba(229, 229, 229, 1); // 默认状态为灰色
			}

			.step-title {
				width: auto;
				height: 108rpx;
				line-height: 108rpx;
				margin-left: 16rpx;
				flex: 1;
			}

			.line {
				width: 1px;
				height: 80rpx;
				border-left: 4rpx dashed rgba(229, 229, 229, 1); 
				transform: translateX(-2rpx);
				position: absolute;
				left: 10rpx;
				top: 66rpx;
			}

			// 当前步骤样式
			&.active {
				.circle {
					background: rgba(189, 26, 45, 1); // 红色
				}
				.step-title {
					color: rgba(189, 26, 45, 1); // 可选：标题颜色
				}
			}

			// 已完成步骤样式
			&.completed {
				.circle {
					background: rgba(200, 200, 200, 1); // 灰色
				}
				.step-title {
					color: rgba(200, 200, 200, 1); // 可选：标题颜色
				}
			}

			// 未完成步骤样式
			&.unfinished {
				.circle {
					background: rgba(0, 128, 0, 1); // 绿色
				}
			}
		}
	}
</style>
